<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { Loading, showToast } from 'vant';

import BiPopup from '@/components/bi-popup/index.vue'
import BiNavBar from '@/components/bi-navbar/index.vue'
import Points from '@/components/bi-header/components/points.vue';
import gameCenterItem from './components/gameCenterItem.vue'

import { games } from '@/mock/games.ts'

import { fetchGameTaskList } from '@/api/game';
import { fetchChaliceOfTaskReward } from '@/api/task.ts'

const router = useRouter()
const userStore = useUserStore()
const userInfo = ref(userStore.info)

const loading = ref(true)

interface Game {
    gameId: number,
    isGetGrail: boolean,
    taskStepTotal: number,
    taskFinalSize: number
}
const gameList = ref<Game[]>([])
const handleFetchGameTaskList = async () => {
    try {
        gameList.value = (await fetchGameTaskList({ device: userStore.device })).data.data
        loading.value = false
    } catch (error) {
    }
}
handleFetchGameTaskList()

const handleProcessGame = (game: Game) => {
    const currentGame = games[game.gameId.toString()]
    return { ...currentGame, ...game }
}

const handleToGamePage = () => {
    router.push({
        path: '/game',
        query: {
            gameId: gameId.value
        }
    })
}

const showGamePopup = ref(false)
const openGameRewardPopup = () => {
    showGamePopup.value = true
}
const closeGameRewardPopup = () => {
    showGamePopup.value = false
}

const handleGetChalice = async () => {
    try {
        await fetchChaliceOfTaskReward({
            device: userStore.device,
            chaliceNum: 1,
            claimType: 2,
            gameId: gameId.value
        })
        showToast('Receive successfully');
        closeGameRewardPopup()
        handleFetchGameTaskList()
        userStore.handleGetUserInfo()
    } catch (error) {
        throw new Error(error as string)
    }
}

const enum ChildEvent {
    status = 0,
    gameId = 1
}
const gameId = ref(0)
const handleOperatorFnOnStatus = (event: number[]) => {
    gameId.value = event[ChildEvent.gameId]
    const unReceive = event[ChildEvent.status] === 1
    const fn = unReceive ? openGameRewardPopup : handleToGamePage
    fn()
}
</script>

<template>
    <div class="gamecenter">
        <BiNavBar @click-left="router.back" background-color="transparent" arrow-color="#ffffff">
            <template #right>
                <Points :point="userInfo.totalPoints" style="margin-right: 2vmin;" />
            </template>
        </BiNavBar>

        <img src="@/assets/imgs/gamecenter-bg.png" alt="gamecenter-bg" width="100%">

        <main class="gamecenter-main">
            <Loading v-if="loading" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);"
                vertical color="#fff" text-color="#fff">
                Loading...
            </Loading>
            <ul v-else class="gamecenter-main-games">
                <li class="gamecenter-main-games-item" v-for="item in gameList" :key="item.gameId">
                    <gameCenterItem :game="handleProcessGame(item)" @game-click="handleOperatorFnOnStatus" />
                </li>
            </ul>
        </main>

        <!-- 获取游戏奖励的弹窗 -->
        <BiPopup v-model:show="showGamePopup" @click="handleGetChalice" button-text="Get Chalice" />

    </div>
</template>

<style scoped lang="scss">
@import url(./gameCenter.scss);
</style>